<template>
  <div>
    <sear-ch />
    <div class="top">
      <van-sidebar class="liebiao" v-model="activeKey">
        <van-sidebar-item
          v-for="(items,index) in lists"
          :title="items.name"
          @click="listsID(items.name)"
          :key="index"
        />
      </van-sidebar>
      <div class="connent">
        <van-tabs v-model="active" @click="iEPaix" class="paix">
        <van-tab title="浏览量排序" ></van-tab>
        <van-tab title="价格排序"></van-tab>
      </van-tabs>
        <van-card
          v-for="(it,index) in connent"
          :key="index"
          @click="tiaz(it.id)"
          :num="it.browsenum"
          :price="it.price"
          :title="it.name"
          :thumb="it.imgs.split('||')[0]"
        />
        <tabbar />
      </div>
    </div>
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar.vue'
import SearCh from './components/SearCh.vue'
import { fetchList, fetchLists } from '@api'
export default {
  data () {
    return {
      lists: [],
      activeKey: 0,
      connent: [],
      query: '鲜花',
      active: 0
    }
  },
  created () {
    this.fetchList()
    this.fetchLists1()
  },
  methods: {
    tiaz (id) {
      this.$router.push({
        path: '/details',
        query: {
          id: id
        }
      })
    },
    iEPaix (index) {
      if (index === 0) {
        fetchLists({ query: this.query, page: 1, size: 9 }).then((res) => {
          this.connent = res.data.data.buynum
        })
      }
      if (index === 1) {
        fetchLists({ query: this.query, page: 1, size: 9 }).then((res) => {
          this.connent = res.data.data.money
        })
      }
    },
    listsID (id) {
      this.query = id
      this.fetchLists1()
    },
    fetchList () {
      fetchList().then((res) => {
        this.lists = res.data.data
      })
    },
    fetchLists1 () {
      fetchLists({ query: this.query, page: 1, size: 9 }).then((res) => {
        this.connent = res.data.data.buynum
      })
    }
  },
  components: {
    Tabbar,
    SearCh
  }
}
</script>

<style lang="scss" scoped>
.liebiao {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  width: 120px;
}
.connent {
  position: fixed; /*固定用*/
  overflow: auto; /*当内容在可显示内容之外，生产自用的滚动条，与position: fixed一起用*/
  top: 100px;
  bottom: 50px;
  right: 0;
  left: 120px;
}
.paix{
  position: fixed;
  top: 50px;
  right: 0;
  left: 120px;
}
</style>
